/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;

/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;

/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;

/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;

/**
 * 布局
 * 
 */
view,
.flex{
	display: flex;
}
.vs-flex-item {
	flex: 1;
}
.vs-space-between {
	justify-content: space-between;
}
.vs-space-around {
	justify-content: space-around;
}
.vs-space-center {
	justify-content: center;
}
.vs-space-end {
	justify-content: flex-end;
}
.vs-row {
	flex-direction: row;
}
.vs-column {
	flex-direction: column;
}
.vs-align-end {
	align-items: flex-end;
}
.vs-align-center {
	align-items: center;
}
.vs-item-hover {
	background-color: rgba(0, 0, 0, 0.05);
}
.vs-btn-hover {
	opacity: 0.8;
}


/**
 * 基础背景颜色
 * 
 */
// 基础背景色
.bg-base {background-color: #0097FD}
.bg-page {background-color: #F5F5F5}
.bg-white {background-color: #ffffff}
// 绿色
.bg-green1 {background-color: #2CB98E}
.bg-green2 {background-color: #00d762}

.text {
	&-left {
		text-align: left;
	}
	&-right {
		text-align: right;
	}
	&-center {
		text-align: center
	}
}

/**
 * 基础文本颜色 
 * 
 */
.color-base{color: #AB6FF6}
.color-white {color: white}
.color-red {color: #E84A54}
// 黑色色阶向下
.color-black2 {color: #222222}
.color-black3 {color: #333333}
.color-black4 {color: #444444}
.color-black6 {color: #666666}
.color-black7 {color: #777777}
.color-black8 {color: #888888}
.color-black9 {color: #999999}

// 基础蓝色色阶向下
.color-blue1 {color: #226FD1}
.color-blue2 {color: #5CA3FC}
.color-blue3 {color: #4399fc}


.font-20 {
	font-style: normal;
	font-size: 20rpx;
	font-family: Droid Sans Fallback;
}
.font-22 {
	font-style: normal;
	font-size: 22rpx;
	font-family: Droid Sans Fallback;
}
.font-24 {
	font-style: normal;
	font-size: 24rpx;
	font-family: Droid Sans Fallback;
}
.font-26 {
	font-style: normal;
	font-size: 26rpx;
	font-family: Droid Sans Fallback;
}
.font-28 {
	font-style: normal;
	font-size: 28rpx;
	font-family: Droid Sans Fallback;
}
.font-30 {
	font-style: normal;
	font-size: 30rpx;
	font-family: Droid Sans Fallback;
}
.font-32 {
	font-style: normal;
	font-size: 32rpx;
	font-family: Droid Sans Fallback;
}
.font-34 {
	font-style: normal;
	font-size: 34rpx;
	font-family: Droid Sans Fallback;
}
.font-36 {
	font-style: normal;
	font-size: 36rpx;
	font-family: Droid Sans Fallback;
}
.font-38 {
	font-style: normal;
	font-size: 38rpx;
	font-family: Droid Sans Fallback;
}
.font-40 {
	font-style: normal;
	font-size: 40rpx;
	font-family: Droid Sans Fallback;
}
.font-42 {
	font-style: normal;
	font-size: 42rpx;
	font-family: Droid Sans Fallback;
}
.font-44 {
	font-style: normal;
	font-size: 44rpx;
	font-family: Droid Sans Fallback;
}
.font-46 {
	font-style: normal;
	font-size: 46rpx;
	font-family: Droid Sans Fallback;
}
.font-48 {
	font-style: normal;
	font-size: 48rpx;
	font-family: Droid Sans Fallback;
}
.font-60 {
	font-style: normal;
	font-size: 60rpx;
	font-family: Droid Sans Fallback;
}

.font-w400 {
	font-style: normal;
	font-weight: 400;
}
.font-w500 {
	font-style: normal;
	font-weight: bold;
	font-family: DroidSans-Bold;
}
.font-w600 {
	font-style: normal;
	font-weight: 600;
	font-family: DroidSans-Bold;
}
.font-w700 {
	font-style: normal;
	font-weight: 700;
	font-family: DroidSans-Bold;
}
.line20 {
	line-height: 20;
}
.line16 {
	line-height: 16;
}

// 1px边框
.vun-hairline,
.vun-hairline--bottom,
.vun-hairline--left,
.vun-hairline--right,
.vun-hairline--surround,
.vun-hairline--top,
.vun-hairline--top-bottom {
	position: relative;
	border-style: solid;
	border-color: #F5F5F5;
}
.vun-hairline--top {
	border-top-width: 1rpx;
}
.vun-hairline--left {
	border-left-width: 1rpx;
}
.vun-hairline--right {
	border-right-width: 1rpx;
}
.vun-hairline--bottom {
	border-bottom-width: 1rpx;
}
.vun-hairline--top-bottom {
	border-top-width: 1rpx;
	border-bottom-width: 1rpx;
}
.vun-hairline--surround {
	border-width: 1rpx;
}

.margin-b5 { margin-bottom: 5rpx; }
.margin-b10 { margin-bottom: 10rpx; }
.margin-b15 { margin-bottom: 15rpx; }
.margin-b20 { margin-bottom: 20rpx; }
.margin-b25 { margin-bottom: 25rpx; }
.margin-b30 { margin-bottom: 30rpx; }
.margin-b35 { margin-bottom: 35rpx; }
.margin-b40 { margin-bottom: 40rpx; }
.margin-b50 { margin-bottom: 50rpx; }
.margin-b60 { margin-bottom: 60rpx; }
.margin-b70 { margin-bottom: 70rpx; }
.margin-b80 { margin-bottom: 80rpx; }

.whitespace-s {
	padding-left: 15rpx;
	padding-right: 15rpx;
}

.whitespace {
	padding-left: 30rpx;
	padding-right: 30rpx;
}
